<script setup lang='ts'>
import type { PlusFormGroupRow } from 'plus-pro-components'

import { useAuditByYY, useGetLevelList, useGetMemberAuditInfoYY } from '@fl/api/man-api'
import { cloneDeep } from 'lodash-es'

const { id } = useRoute().params

const formRef = ref()

const { data, isLoading } = useGetMemberAuditInfoYY(String(id))

const { data: levelData, isLoading: levelLoading } = useGetLevelList()

const { isPending: auditLoading, mutate: auditByMutate } = useAuditByYY()

const { back } = useRouter()

const loading = computed(() => levelLoading.value || isLoading.value)

const memberLevelIdOptions = computed(() => {
    return levelData.value
        ? levelData.value.map((item: any) => {
            return {
                fieldItemProps: {
                    disabled: item.status === 2,
                },
                label: item.levelName,
                value: item.levelId,
            }
        })
        : []
})

const oldMemberId = ref('')

const state = ref<any>({
    actType: '',
    actualPay: '',
    actualPayDate: '',
    afterExpiration: '',
    attachment: [],
    auditStatus: '',
    createTime: '',
    enterpriseId: '',
    enterpriseName: '',
    expirationTime: '',
    levelId: '',
    memberLevelName: '',
    memberStatus: '',
    payAmount: '',
    payDate: '',
    paymentReceiptList: [],
    remark: '',
})

const isAudit = computed(() => state.value.status === 2)

const actTypeOptions = [
    {
        label: '续费',
        value: 2,
    },
    {
        label: '升级',
        value: 3,
    },
    {
        label: '续费升级',
        value: 4,
    },
]

const group = computed<PlusFormGroupRow[]>(() => {
    return [
        {
            columns: [
                {
                    colProps: {
                        span: 8,
                    },
                    label: '公司名称',
                    prop: 'enterpriseName',
                    valueType: 'text',
                },
                {
                    colProps: {
                        span: 8,
                    },
                    label: '会员等级',
                    prop: 'memberLevelName',
                    valueType: 'text',
                },
                {
                    colProps: {
                        span: 8,
                    },
                    label: '申请时间',
                    prop: 'createTime',
                    valueType: 'text',
                },
                {
                    colProps: {
                        span: 8,
                    },
                    label: '缴费金额(元)',
                    prop: 'payAmount',
                    valueType: 'text',
                },
                {
                    colProps: {
                        span: 8,
                    },
                    label: '缴费日期',
                    prop: 'payDate',
                    valueType: 'text',
                },
                {
                    colProps: {
                        span: 8,
                    },
                    label: '会员状态',
                    prop: 'memberStatus',
                    valueType: 'text',
                },
                {
                    colProps: {
                        span: 24,
                    },
                    label: '有效期至',
                    prop: 'expirationTime',
                    valueType: 'text',
                },
                {
                    colProps: {
                        span: 24,
                    },
                    label: '支付凭证',
                    prop: 'paymentReceiptList',
                    valueType: 'text',
                },
            ],
            title: '申请信息',
        },
        {
            columns: [
                {
                    colProps: {
                        span: 8,
                    },
                    label: '审批意见',
                    options: [
                        {
                            label: '通过',
                            value: 0,
                        },
                        {
                            label: '不通过',
                            value: 1,
                        },
                    ],
                    prop: 'auditStatus',
                    valueType: 'text',
                },
                {
                    colProps: {
                        span: 8,
                    },
                    fieldProps: { precision: 2 },
                    label: '入账金额(元)',
                    prop: 'actualPay',
                    valueType: 'text',
                },
                {
                    colProps: {
                        span: 8,
                    },
                    fieldProps: {
                        type: 'datetime',
                        valueFormat: 'YYYY-MM-DD HH:mm:ss',
                    },
                    label: '入账时间',
                    prop: 'actualPayDate',
                    valueType: 'text',
                },
                {
                    colProps: {
                        span: 24,
                    },
                    label: '备注',
                    prop: 'remark',
                    valueType: 'text',
                },
                {
                    colProps: {
                        span: 24,
                    },
                    label: '附件',
                    prop: 'attachment',
                },
            ],
            title: '财务审核',
        },
        {
            columns: [
                {
                    colProps: {
                        span: 9,
                    },
                    label: '选择类型',
                    onChange: (val: any) => {
                        state.value.afterExpiration = ''
                        if (val === 2 && oldMemberId.value) {
                            state.value.levelId = oldMemberId.value
                        }
                    },
                    options: actTypeOptions,
                    prop: 'actType',
                    valueType: isAudit.value ? 'text' : 'select',
                },
                {
                    colProps: {
                        span: 9,
                    },
                    fieldProps: computed(() => ({ disabled: state.value.actType === 2 })),
                    label: '会员等级',
                    options: memberLevelIdOptions.value,
                    prop: isAudit.value ? 'finalMemberLevelName' : 'levelId',
                    valueType: isAudit.value ? 'text' : 'select',
                },
                {
                    colProps: {
                        span: 9,
                    },
                    fieldProps: {
                        type: 'date',
                        valueFormat: 'YYYY-MM-DD',
                    },
                    hideInForm: computed(() => isAudit.value ? (state.value.actType !== '续费') : (![3, 4].includes(state.value.actType))),
                    label: '有效期',
                    prop: 'afterExpiration',
                    valueType: isAudit.value ? 'text' : 'date-picker',
                },
            ],
            title: '运营审核',
        },
    ]
})

const MEMBER_STATUS = {
    0: '正常',
    1: '已过期',
    2: '已禁用',
}

const rules = {
    actType: [{
        message: '请选择类型',
        required: true,
    }],
    afterExpiration: [
        {
            message: '请选择有效期',
            required: true,
        },
    ],
    levelId: [
        {
            message: '请选择会员等级',
            required: true,
        },
    ],
}
async function mySubmit() {
    const valid = await formRef.value.formInstance.validate()
    if (valid) {
        const params = {
            actType: state.value.actType,
            afterExpiration: state.value.afterExpiration,
            enterpriseId: state.value.enterpriseId,
            enterpriseName: state.value.enterpriseName,
            levelId: state.value.levelId,
            orderId: id,
            payDate: state.value.payDate,
        }
        auditByMutate(params, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                back()
            },
        })
    }
}

function showFile(file: any) {
    window.open(file)
}

watchEffect(() => {
    if (data.value) {
        oldMemberId.value = data.value.memberLevelId
        console.log(actTypeOptions[data.value.actType])
        const params = {
            ...data.value,
            actType: data.value.status === 2 ? (actTypeOptions.filter(item => item.value === data.value.actType)?.[0]?.label || '新增') : data.value.actType === 1 ? '' : data.value.actType,
            auditStatus: '通过',
        }
        state.value = cloneDeep(params)
    }
})
</script>

<template>
    <el-skeleton v-if="loading"
                 :rows="5"
    />

    <el-card v-else
             shadow="never"
    >
        <template #header>
            <div text-16
                 font-bold
            >
                会员审核
            </div>
        </template>

        <PlusForm ref="formRef"
                  v-model="state"
                  :group="group"
                  :row-props="{ gutter: 20 }"
                  :label-width="120"
                  :rules="isAudit ? {} : rules"
        >
            <template #plus-field-memberStatus>
                {{ MEMBER_STATUS[state?.memberStatus] ?? '' }}
            </template>

            <template #plus-field-paymentReceiptList>
                <div v-if="state.paymentReceiptList?.length"
                     text-red
                     flex
                     flex-col
                     gap-10
                     justify-center
                >
                    <div v-for="item, index in state.paymentReceiptList"
                         :key="index"
                         text
                         cursor-pointer
                         @click="showFile(item.url)"
                    >
                        {{ item.name }}
                    </div>
                </div>
            </template>

            <template #plus-field-attachment>
                <div v-if="state.attachment?.length"
                     text-red
                     flex
                     flex-col
                     gap-10
                     justify-center
                >
                    <div v-for="item, index in state.attachment"
                         :key="index"
                         text
                         cursor-pointer
                         @click="showFile(item.url)"
                    >
                        {{ item.name }}
                    </div>
                </div>
            </template>

            <template #footer>
                <div style="margin: 0 auto">
                    <el-button v-if="!isAudit"
                               type="primary"
                               :loading="auditLoading"
                               @click="mySubmit"
                    >
                        提交
                    </el-button>

                    <el-button @click="back">
                        返回
                    </el-button>
                </div>
            </template>
        </PlusForm>
    </el-card>
</template>
